<template>
  <div>
    <el-button type="primary" @click="open">open</el-button>
    <m-model-form
      title="编辑用户"
      width="50%"
      :options="options"
      v-model:visible="visible"
      :on-success="handleSuccess"
      isScroll
    >
      <template #footer="{ form }">
        <span class="dialog-footer">
          <el-button @click="cancel(form)">Cancel</el-button>
          <el-button type="primary" @click="confirm(form)"> Confirm </el-button>
        </span>
      </template>
      <template #uploadArea>
        <el-button size="small" type="primary">Click to upload</el-button>
      </template>
      <template #uploadTip>
        <div class="color: #ccc;font-size: 12px;">
          jpg/png files with a size less than 500kb
        </div>
      </template>
    </m-model-form>
  </div>
</template>

<script lang="ts" setup>
import { ElButton } from "element-plus";
import { ref } from "vue";
import { FormOptions } from "../../components/form/src/type/type";
let visible = ref<boolean>(false);
let options: FormOptions[] = [
  {
    type: "input",
    value: "",
    label: "用户名",
    prop: "username",
    rules: [
      {
        required: true,
        message: "用户名不能为空",
        trigger: "blur",
      },
      {
        min: 2,
        max: 6,
        required: true,
        message: "用户名2-6位之间",
        trigger: "blur",
      },
    ],
    attrs: {
      // showPassWord: true,
    },
  },
  {
    type: "input",
    value: "",
    label: "密码",
    prop: "password",
    rules: [
      {
        required: true,
        message: "密码不能为空",
        trigger: "blur",
      },
      {
        min: 6,
        max: 12,
        required: true,
        message: "密码6-12位之间",
        trigger: "blur",
      },
    ],
    attrs: {
      showPassWord: false,
    },
  },
  {
    type: "select",
    value: "",
    label: "职位",
    placeholder: "请选择",
    prop: "role",
    rules: [
      {
        required: true,
        message: "职位不能为空",
        trigger: "blur ",
      },
    ],
    attrs: {
      style: {
        width: "100%",
      },
      clearable: true,
    },
    children: [
      {
        type: "option",
        label: "经理",
        value: "1",
        attrs: {},
      },
      {
        type: "option",
        label: "主管",
        value: "2",
        attrs: {},
      },
    ],
  },
  {
    type: "upload",
    label: "上传",
    prop: "pic",
    rules: [
      {
        required: true,
        message: "文件不能为空",
        trigger: "blur ",
      },
    ],
    uploadAttrs: {
      action: "https://jsonplaceholder.typicode.com/posts/",
      multiple: true,
      limit: 3,
    },
  },
  {
    type: "editor",
    value: "<p>我是一条描述内容</p>",
    prop: "desc",
    placeholder: "请输入内容",
    label: "描述",
    // rules: [ { required: true, message: '描述不能为空', trigger: 'blur'}]
  },
];
const open = () => {
  visible.value = true;
};
const confirm = (scope: any) => {
  let validate = scope.validate();
  let data = scope.getFormData();
  console.log(data);
  validate((val: boolean) => {
    if (val) {
      visible.value = false;
    } else {
    }
  });
};
const cancel = (scope: any) => {
  scope.resetFields();
  //   visible.value = false;
};
const handleSuccess = (val: any) => {
  console.log("success", val);
};
</script>
<style lang="scss" scoped></style>
